<template>
    <div class="inner-container">
        <ul class="operateList">
            <li class="operateBtn bigWidth" @click="Show(true,1)"><img src="../../../assets/img/add.png" height="20" width="20" /><span class="operateTitle">新增根节点</span></li>
            <li class="operateBtn bigWidth" @click="Show(true,2)"><img src="../../../assets/img/addChild.png" height="20" width="20" /><span class="operateTitle">新增子节点</span></li>
            <li class="operateBtn" @click="Show(true,3)"><img src="../../../assets/img/eidt.png" height="20" width="20" /><span class="operateTitle">编辑</span></li>
            <li class="operateBtn" @click="DeleteData()"><img src="../../../assets/img/delete.png" height="20" width="20" /><span class="operateTitle">删除</span></li>
        </ul>
  <!--       <queryFrom @Refresh="Refresh"></queryFrom> -->
            <div style="padding:15px 10px 0 10px">
          <el-table :data="tableData" highlight-current-row class="table" @current-change="handleCurrentChange" style="width: 100%" :height='tableHeight' border>
            <!-- :default-sort = "{prop: 'sortId', order: 'descending'}" -->
            <el-table-column label="名称" min-width="50%">
                <template scope="scope">
                    <el-button :style="SetRowHeadLeft(scope.row)" @click="InsertTr(scope.$index, scope.row,scope)" type="text" showType="(0)" :class="scope.row.class"></el-button>{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="code" label="编码" min-width="50%" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sortId" label="序号" min-width="50%" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="remark" label="备注" min-width="50%">
            </el-table-column>
            <!--             <el-table-column property="enable" :formatter="DataFormatter" label="是否启用" min-width="50%">
            </el-table-column>
            <el-table-column property="remark" label="备注" min-width="50%">
            </el-table-column>
            <el-table-column property="createTime" label="创建时间" min-width="50%">
            </el-table-column> -->
        </el-table>
    </div>
        <el-dialog title="组织" @close="FormClose" v-model="dialogTableVisible" size="800px">
            <from @Show="Show" :editData="editData" :btnType="btnType" :parentId="parentId" ref="form" @Refresh="Refresh"></from>
        </el-dialog>
        <!-- <pageBox :totalNum="totalNum" @Refresh='Refresh'></pageBox> -->
    </div>
</template>
<script>
import from from './form/Form.vue'
import queryFrom from './form/QueryForm.vue'
import pageBox from '../../Common/Page1.vue'
export default {
    mounted() {},
        components: {
            from,
            queryFrom,
            pageBox
        },

        data() {
            return {
                tableData: [],
                selectedRow: null,
                dialogTableVisible: false,
                tableHeight:700,
                pageInfo: {
                    page: 1,
                    pageSize: 9999
                },
                queryInfo: {
                    handle: true
                },
                totalNum: 0,
                btnType: -1,
                parentId: null,
                editData: null
            }
        },
         mounted(){
            console.log(56);
            if($(window).width()>=1920){
        // console.log($(window).height());
         //得到初始高度
        let wrapListHeight = $('.view').height(),
            warpBoxHigeht = $('.operateList').height();
            // iptHeight = $('.queryDiv').height();
        this.tableHeight = wrapListHeight - warpBoxHigeht- 50;
            //计算显示高度
        var timer = null;
        $(window).resize(() => {
            clearTimeout(timer)
            timer = setTimeout(() => {
                  let wrapListHeight = $('.view').height(),
                warpBoxHigeht = $('.operateList').height();
                // iptHeight = $('.queryDiv').height();
                this.tableHeight = wrapListHeight - warpBoxHigeht- 50;
                console.log(wrapListHeight,warpBoxHigeht,this.tableHeight);
            }, 200)
        })
    }else{
        console.log(56);
        this.tableHeight = "";
    };
        },
        methods: {
            handleCurrentChange(val) {
                this.selectedRow = val;
            },
            Show(showType, btnType) {
                if (btnType > 1) {
                	
                    if (this.selectedRow == null) {
                        this.$message.error("请选择数据");
                        return;
                    } else if(btnType==2 && this.selectedRow.level==2){
                    	this.$message.error("不能添加多级子节点");
                        return;
                    	}else if (btnType == 3) {
                        this.SetFormData(btnType);
                    }
                    this.parentId = this.selectedRow.id;
                }
                this.dialogTableVisible = showType;
                this.btnType = btnType;
            },
            Refresh() {
                this.queryInfo.current = this.pageInfo.page;
                this.queryInfo.size = this.pageInfo.pageSize;
                this.ajax({
                    // url: 'api/SystemOrganization/GetTreeQuery',
                    // type:"post",
                    url: 'tSysOrganization/getOrgs',
                    data: this.queryInfo,
                    success: function(tree) {
                        this.tableData = [];
                        this.HandleTreeGrid(tree, this.tableData);
                        this.tableData.forEach((item) => {
                            item.class = this.GetIsOpenClass(item);
                        });

                    }
                })
            },
            HandleTreeGrid(treeNode, tableData) {
                for (var item of treeNode) {
                    tableData.push(item);
                    if (item.hasChild && item.children.length > 0) {
                        if (item.child == undefined) {
                            item.child = [];
                        }
                        item.isOpen = true;
                        item.children.forEach((node) => {
                            item.child.push(node);
                        });
                        this.HandleTreeGrid(item.children, tableData);
                    }
                }
            },
            SetFormData() {
                this.ajax({
                    url: 'tSysOrganization/selectOrgById?id=' + this.selectedRow.id,
                    success: function(data) {
                        this.editData = data;
                    }
                })
            },
            DeleteData() {
                console.log(this.selectedRow)
                if (this.selectedRow == null) {
                    this.$message.error("请选择数据");
                    return;
                } else if (this.selectedRow.child && this.selectedRow.child.length) {
                    this.$message({
                        message: '请先删除子节点',
                        type: 'warning'
                    });
                } else {
                    this.$confirm('是否删除数据？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.ajax({
                            url: 'tSysOrganization/deleteOrg',
                            type: 'post',
                            data: {
                            	id:this.selectedRow.id
                            },
                            success: function(data) {
                                this.Refresh();
                            }
                        });
                    }).catch(() => {

                    });

                }

            },
            InsertTr(index, row, scope) {
                if (row.isOpen == undefined || row.isOpen == false) {
                    if (row.child == undefined) {
                        //this.GetChild(index, row);
                    } else {
                        this.InsertChildTableData(index, row);
                    }
                } else {
                    if (row.child != undefined) {
                        if (row.child.length > 0) {
                            this.RemoveChildTableData(index, row);
                        }
                    }
                }

            },
            GetChild(index, row) {
                this.ajax({
                    url: 'SystemOrganization/Query?IsRoot=false&parentId={0}'.format(row.id),
                    data: {
                        page: 1,
                        pageSize: 999
                    },
                    success: function(data) {
                        row.child = data.row;
                        row.child.forEach((item) => {
                            item.class = this.GetIsOpenClass(item);
                        });
                        this.InsertChildTableData(index, row);
                    }
                })
            },
            InsertChildTableData(index, row) {
                this.HandleAddChild(index, row);
                if (row.child.length == 0) {
                    row.hasChild = false;
                }
                row.isOpen = true;
                row.class = this.GetIsOpenClass(row);
            },
            RemoveChildTableData(index, row) {
                let num = this.HandleRowChildCount(row);
                this.tableData.splice(index + 1, num);
                row.isOpen = false;
                row.class = this.GetIsOpenClass(row);
            },
            HandleAddChild(index, row) {
                if (row.child.length > 0) {
                    row.child.forEach((item, i) => {
                        index = index + 1;
                        this.tableData.splice(index, 0, item);
                        if (item.isOpen && item.child != undefined) {
                            index = this.HandleAddChild(index, item);
                        }
                    })
                    return index;
                }
            },
            HandleRowChildCount(row) {
                if (row.child != undefined && row.isOpen) {
                    if (row.child.length > 0) {
                        let i = parseInt(row.child.length)
                        row.child.forEach((item) => {
                            i = i + this.HandleRowChildCount(item);
                        });
                        return i;
                    } else {
                        return 0;
                    }
                } else {
                    return 0;
                }

            },
            SetRowHeadLeft(row) {
                return {
                    'margin-left': ((parseInt(row.level) - 1) * 20) + 'px',
                    'margin-right': ((parseInt(row.level)) * 5) + 'px'
                };
            },
            GetIsOpenClass(row) {
                if (row.hasChild) {
                    return {
                        'el-icon-arrow-down': row.isOpen != undefined && row.isOpen == true,
                        'el-icon-arrow-right': row.isOpen == undefined || row.isOpen == false
                    };
                } else {
                    return {
                        'iocClose': true
                    };
                }
            },
            DataFormatter(row, column) {
                if (row.enable == null || !row.enable) {
                    return "否";
                } else {
                    return "是";
                }
            },
            FormClose() {
                this.$refs.form.ClearData();
            }
        }, computed: {

        },
        watch: {},
        created() {
            this.Refresh();
        }

}
</script>
<style scoped>
.el-table__body-wrapper {
    overflow-x: hidden;
}

.operateList {
    width: 100%;
    height: 35px;
    border-bottom: 1px solid #eae9e9;
    font-size: 0;
}

.operateBtn {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    height: 20px;
    line-height: 20px;
    border-right: 1px solid #ddd;
    padding: 0 10px;
    margin: 5px 0;
    text-align: center;
    cursor: pointer;
    color: #666;
}

.operateBtn:last-child {
    border-right: none;
}

.operateTitle {
    vertical-align: top;
    padding-left: 4px
}

.iocClose {
    width: 14px;
    height: 30px;
}
</style>
